<script setup>
import Lang from "@/components/Lang.vue";
import { ref } from "vue";
// import { showToast } from "vant/lib/toast";
import { useRoute } from 'vue-router'
// import { useLangStore } from "@/stores/lang";
// import { getVerifyCodeApi, loginApi } from '@/apis/user.js'

const route = useRoute()
// const router = useRouter()
// const langStore = useLangStore()

let loginshow = ref(false)

// const countries = ['China', 'Mexico', 'USA', 'Germany', 'Slovakia', 'Malaysia']
// const options = countries.map(item => {
//   return {
//     value: item,
//     label: item
//   }
// })
// const ucountry = ref('China')
// const uphone = ref('')
// const ucode = ref('')

// const area_code = ref('86')

// watch(() => ucountry.value, (newVal) => {
//   switch (newVal) {
//     case 'China':
//       area_code.value = '86'
//       break
//     case 'USA':
//       area_code.value = '1'
//       break
//     case 'Mexico':
//       area_code.value = '52'
//       break
//     case 'Germany':
//       area_code.value = '49'
//       break
//     case 'Slovakia':
//       area_code.value = '421'
//       break
//     case 'Malaysia':
//       area_code.value = '60'
//       break
//     default:
//       area_code.value = '86'
//       break
//   }
// })

// const nologinshow = ref(false)

// const codetips = ref('Send code')

// // 获取验证码
// const getCode = async () => {
//   if (uphone.value == '') {
//     return showToast('Please enter your mobile number')
//   }
//   const res = await getVerifyCodeApi({ mobile: uphone.value, area_code: area_code.value, lang: langStore.getLang })
//   // console.log(res);
//   if (res.data.code === 200) {
//     // 倒计时
//     let countdown = ref(60)
//     let timer = setInterval(() => {
//       codetips.value = `${countdown.value}s`
//       countdown.value--
//       if (countdown.value < 0) {
//         clearInterval(timer)
//         codetips.value = 'Send code'
//       }
//     }, 1000)
//     // 发送成功提示
//     showToast('Verification code has been sent')
//   } else if (res.data.code === 401) {
//     // 无权限 非白名单
//     nologinshow.value = true
//   } else {
//     showToast(res.data.msg)
//   }
// }

// // 登录
// const login = async () => {
//   if (uphone.value == '' || ucode.value == '') {
//     return showToast('Please enter complete information')
//   }
//   const res = await loginApi({ mobile: uphone.value, code: ucode.value })
//   // console.log(res);
//   if (res.data.code === 200) {
//     // 登录成功 存储token和token过期时间
//     localStorage.setItem('token', res.data.data.token)
//     localStorage.setItem('expire_at', res.data.data.expire_at)
//     loginshow.value = false
//     // 跳转
//     router.replace({ path: '/en', query: { from: 'main' } })
//   } else if (res.data.code === 401) {
//     // 无权限
//     nologinshow.value = true
//   }
//   else {
//     // 登录失败
//     showToast(res.data.msg)
//   }
// }

const from = route.query.from
loginshow.value = from == 'main' ? false : true

</script>
<template>
  <div class="index box bg clmcenter">
    <img src="@/assets/img/logo.png" class="logo" alt="logo">
    <!-- 语言 -->
    <Lang v-show="!loginshow" />
    <div class="container">
      <button type="button" class="btn1" @click="$router.replace('/en/main')">ENTER</button>
      <div class="welcome_en clmcenter">
        <!-- <p class="mb_0">WELCOME</p> -->
        <p class="mb_1">Welcome XinQuan Intelligent Manufacturing Center</p>
      </div>
    </div>
    <!-- 登录 -->
    <!-- <div class="loginbox clmcenter" v-show="loginshow">
      <div class="logininfobox clmcenter">
        <p class="title">Verifying your number</p>
        <form class="loginfrm">
          <div class="litem">
            <el-select-v2 v-model="ucountry" :options="options" size="large" item-height="70" />
          </div>
          <div class="litem litem_phone">
            <label>+{{ area_code }}</label>
            <input type="tel" v-model="uphone" class="lipt ipt_phone" placeholder="Phone number">
          </div>
          <div class="litem">
            <input type="tel" maxlength="4" v-model="ucode" class="lipt ipt_code" placeholder="Verification code">
            <button type="button" class="btn btn_code" @click="getCode">{{ codetips }}</button>
          </div>
        </form>
        <button type="button" class="btn btn_submit" @click="login">Login in</button>
      </div>
    </div> -->
    <!-- 登录失败——无权限 -->
    <!-- <div class="nologinrole clmcenter" v-show="nologinshow">
      <p>Please confirm your permissions or contact the<br>system administrator for assistance</p>
      <button type="button" class="btn btn_close" @click="nologinshow = false">Close</button>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.index {
  color: #ffffff;
  .container {
    margin-top: 13vw;
    text-align: center;
    .btn1 {
      width: 7.03vw;
      height: 1.63vw;
      font-size: 0.87vw;
      transition: all 0.5s linear;
    }
    .btn1:hover {
      transform: scale(1.1);
    }
    .welcome_en {
      margin-top: 4.6vw;
      margin-bottom: 8vw;
      // .mb_0 {
      //   font-size: 1.297vw;
      // }
      .mb_1 {
        position: relative;
        padding-top: 0.78vw;
        font-size: 1.52vw;
        letter-spacing: 0.1vw;
        color: rgba($color: #ffffff, $alpha: 0.8);
      }
      // .mb_1::after {
      //   position: absolute;
      //   left: 0;
      //   bottom: 0;
      //   content: "Welcome Xinquan Intelligent Manufacturing Center";
      //   transform: rotateX(180deg) translateY(-120%);
      //   background: linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.4) 70%);
      //   background-clip: text;
      //   -webkit-background-clip: text;
      //   -moz-background-clip: text;
      //   color: transparent;
      // }
    }
  }
  // 登录
  .loginbox,
  .nologinrole {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba($color: #000000, $alpha: 0.7);
  }
  .loginbox {
    .logininfobox {
      background-color: rgba($color: #ffffff, $alpha: 0.7);
      padding: 4.48vw 4.84vw;
      border-radius: 1.17vw;
      .title {
        align-self: flex-start;
        font-size: 1.5625vw;
        color: #000000;
        font-weight: bold;
      }
      .loginfrm {
        margin-top: 2.29vw;
        .litem {
          width: 28.18vw;
          height: 3.98vw;
          border-radius: 0.25vw;
          background-color: #ffffff;
          margin-bottom: 1.98vw;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 1.458vw;
          overflow: hidden;
          label,
          input {
            font-size: 1.25vw;
            color: #000000;
          }
          .lipt {
            flex: 1;
            margin-left: 0.5vw;
          }
          .ipt_phone {
            max-width: 20.8vw;
          }
          .ipt_code {
            max-width: 15.6vw;
          }
          .btn_code {
            padding: 0.6vw 1.3vw;
            font-size: 1.05vw;
            color: #ffffff;
            white-space: nowrap;
          }
        }
        .litem_phone {
          justify-content: flex-start;
        }
      }
      .btn_submit {
        width: 11.09vw;
        height: 2.7vw;
        margin-top: 1.5625vw;
        font-size: 1.458vw;
        color: #ffffff;
        transition: all 0.5s linear;
      }
      .btn_submit:hover {
        transform: scale(1.1);
      }
      .btn_submit::before {
        content: '';
        position: absolute;
        top: -30%;
        left: -15%;
        width: 10%;
        height: 140%;
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg);
        box-shadow: 0 0 15px 9px rgba(255, 255, 255, 0.5);
        -webkit-animation: blink 3s ease-in 1s infinite;
        animation: blink 3s ease-in 1s infinite;
      }
    }
  }
  // 无权限
  .nologinrole {
    text-align: center;
    z-index: 99;
    p {
      font-size: 1.67vw;
      color: #ffffff;
      line-height: 1.4;
      letter-spacing: 0.1vw;
      text-transform: uppercase;
    }
    .btn_close {
      font-size: 1.56vw;
      width: 11.09vw;
      height: 2.7vw;
      margin-top: 1.98vw;
      transition: all 0.5s linear;
    }
    .btn_close:hover {
      transform: scale(1.1);
    }
  }
}
</style>
